<template>
	<view class="resourceScheduling">
		<!-- 资源调度主页面 -->
		<navBar title="资源调度"  goBackUrl="/subpackage-emergency/pages/eventDetails" @goBack="goBack"></navBar>

		<view style="height: 30rpx;background-color: #F5F7FA;"></view>

		<view class="content">
			<!-- <view class="nav">
				<view class="nav-item" v-for="item in typeList" :key="item.type"
					:class="{ active: currentIndex === item.type }" @click="getSwitchType(item)">{{ item.name }}</view>
			</view> -->
			<u-sticky>
			    <u-tabs :list="typeList" @click="getSwitchType" :scrollable="false" :lineWidth='120'></u-tabs>
			</u-sticky>
			<scroll-view scroll-y="true" class="scroll-Box">
				<!-- 调度人员 -->
				<DispatchPerson v-if="currentIndex === 1" :eventId="eventId" @shoppingList="getShoppingCartList"
					:stationList="stationList"></DispatchPerson>
				<!-- 调度设备 -->
				<DispatchDevice v-if="currentIndex === 2" :stationList="stationList" :eventId="eventId"
					@shoppingList="getShoppingCartList"></DispatchDevice>
				<!-- 调度材料 -->
				<DispatchMaterial v-if="currentIndex === 3" :stationList="stationList" :eventId="eventId"
					@shoppingList="getShoppingCartList"></DispatchMaterial>
			</scroll-view>
		</view>

		<view class="footer">
			<view class="num" @click="toDispatchSheet">{{ shoppingCartNum }}</view>
			<image class="image" src="/static/image/cart.png" @click="toDispatchSheet" mode=""></image>
			<view class="select" @click="toDispatchSheet">已选</view>
		</view>
	</view>
</template>

<script>
	import DispatchPerson from "./components/dispatchPerson.vue"
	import DispatchDevice from "./components/dispatchDevice.vue"
	import DispatchMaterial from "./components/dispatchMaterial.vue"
	import {
		getStationList,
		station_getProjectListByNameByLike
	} from "@/api/baseManage/baseManage.js";
	import {
		getEventShoppingCartList
	} from "@/api/emergency/emergencyDispatch.js";
	export default {
		name: "resourceScheduling",
		components: {
			DispatchPerson,
			DispatchDevice,
			DispatchMaterial
		},
		data() {
			return {
				typeList: [{
					type: 1,
					name: "人员"
				}, {
					type: 2,
					name: "设备"
				}, {
					type: 3,
					name: "材料"
				}], // 类型数组
				currentIndex: 1, // 切换类型
				stationList: [], // 基地列表数据
				eventId: null, // 事件id
				isRehearsal: false,
				shoppingCartNum: 0, // 购物车数量
				dataObj: {},
				personNum: 0,
				deviceNum: 0,
				materialNum: 0,
				laborNum: 0,
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on("setData", (data) => {
				console.log(data, 'enevtChannel222')
				this.dataObj = data.data
				this.eventId = data.data.id || null
				if (data.data.isRehearsal == 1) {
					this.isRehearsal = true
				}
			})
			if (!this.eventId) {
				this.eventId = option.eventId
			}
		},
		mounted() {
			this.getStationList()
			this.getShoppingCartList()
		},
		methods: {
			// 获取基地数据
			getStationList() {
				station_getProjectListByNameByLike({}).then((data) => {
					if (data.success) {
						this.stationList = data.result.filter(it => it.typeId !== 295)
					}
				});
			},

			// 获取购物车数据
			async getShoppingCartList() {
				let res = await getEventShoppingCartList({
					eventId: this.eventId
				})
				// 人员 数量
				let personNum = res.result.personList.length || 0
				// 设备 数量
				let deviceNum = res.result.equipmentList.length || 0
				// 材料 数量
				let materialNum = 0
				// 劳务人员 数量
				let laborNum = 0
				let obj = {}
				if (res.result.materialList.length > 0) {
					let mater = res.result.materialList.filter(item => item.costNum !== 0)
					if (mater.length > 0) {
						mater.forEach(item => {
							let key = item.stationName + '-' + item.name + "-" + item.specificationModel
							if (obj[key]) {
								obj[key].push(item)
							} else {
								obj[key] = []
								obj[key].push(item)
							}
						})
						materialNum = Object.keys(obj).length
					} else {
						materialNum = 0
					}
				}

				this.shoppingCartNum = 0
				if (res.result.laborPerson && res.result.laborPerson.num) {
					laborNum = res.result.laborPerson.num
				}
				this.shoppingCartNum = personNum + deviceNum + materialNum + laborNum
			},

			// 切换类型
			getSwitchType(item) {
				console.log(item, '事件');
				this.currentIndex = item.type
				// this.getShoppingCartList()
			},

			// 跳转到出库量清单
			toDispatchSheet() {
				uni.redirectTo({
					url: `/subpackage-emergency/pages/components/dispatchSheet?eventId=${this.eventId}`
				})
			},

			// 返回上一级
			goBack(url) {
				uni.navigateTo({
					url: `${url}?eventId=${this.eventId}&isShow=${true}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.resourceScheduling {
		height: 100%;
		width: 100%;
		/* #ifdef MP-WEIXIN */
			box-sizing: border-box;
			padding-top: 200rpx;
		/* #endif */

		.scroll-Box {
			margin-top: 10px;
			height: calc(100% - 120rpx) !important;
			// height: 80%;
		}

		.content {
			background-color: #fff;
			/* #ifdef APP-PLUS  || H5 */
				height: calc(100% - 330rpx) !important;
			/* #endif */
			/* #ifdef MP-WEIXIN */
				height: calc(100% - 130rpx) !important;
			/* #endif */
		}

		.nav {
			background-color: #fff;
			width: 100%;
			height: 100rpx;
			display: flex;

			.nav-item {
				flex: 1;
				text-align: center;
				font-family: Noto Sans KR-Medium, Noto Sans KR;
				font-weight: 500;
				height: 100%;
				line-height: 100rpx;
				color: #445469;
				font-size: 36rpx;
				border-bottom: 2rpx solid #E2E5ED;
				cursor: pointer;
			}

			.active {
				color: #2F80ED;
				border-bottom: 2rpx solid #2F80ED;
			}
		}

		.footer {
			position: relative;
			width: 100%;
			height: 100rpx;

			.image {
				position: absolute;
				bottom: 0rpx;
				right: 140rpx;
				width: 60rpx;
				height: 60rpx;
			}

			.select {
				position: absolute;
				bottom: 6rpx;
				right: 60rpx;
				font-size: 32rpx;
			}

			.num {
				position: absolute;
				bottom: 24rpx;
				right: 120rpx;
				padding: 5rpx 15rpx;
				border-radius: 30rpx;
				background-color: #f43530;
				color: #fff;
				z-index: 1;
			}
		}
	}

	::v-deep .navBar {
		margin: 0rpx;
		padding-top: 30rpx;
	}

	::v-deep .navBar .left {
		top: 44rpx;
	}
</style>
<style>
	page {
		height: 100%;
		width: 100%;
	}

	body {
		width: 100%;
		height: 100%;
	}
</style>